<template>

  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <BiFormItem label="渠道">
          <template slot="content">
            <el-select
              ref="channel"
              v-model="formData.id"
              remote
              clearable
              :remote-method="remoteMethod"
              filterable
              collapse-tags
              multiple
              placeholder="请输入渠道ID/名称"
              @focus="mobileClearChannel"
              @hook:mounted="mobileClearChannel"
              @visible-change="mobileClearChannel"
              @change="channelResult"
            >
              <el-option
                v-for="item in channelList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="账户">
          <template slot="content">
            <el-select
              ref="keyword"
              v-model="formData.advertiser_id"
              clearable
              filterable
              multiple
              allow-create
              collapse-tags
              remote
              placeholder="请输入关键词"
              :remote-method="advertiserListData"
              @focus="mobileClearkeyword"
              @hook:mounted="mobileClearkeyword"
              @visible-change="mobileClearkeyword"
              @change="onadvertiser"
            >
              <el-option
                v-for="(item,index) in advertiserList"
                :key="index"
                :label="item.advertiser_name"
                :value="item.advertiser_id"
              > </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="短剧名称">
          <template slot="content">
            <el-select
              ref="platlet"
              v-model="formData.playlet_id"
              filterable
              multiple
              remote
              collapse-tags
              placeholder="请输入短剧名称"
              :remote-method="platletList"
              size="small"
              clearable
              @focus="mobileClearPlatlet"
              @hook:mounted="mobileClearPlatlet"
              @visible-change="mobileClearPlatlet"
            >
              <el-option
                v-for="item in platletNameList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              > </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="创建人">
          <template slot="content">
            <el-input
              v-model="formData.creator"
              clearable
              placeholder="请输入创建人"
            />
          </template>
        </BiFormItem>
        <BiFormItem label="分销方">
          <template slot="content">
            <selectPlaylet
              type="distributor"
              :is-resize="isResize"
              :multiple="true"
              :reserve="false"
              :autoreset="true"
              @result="distributorResult"
            />
          </template>
        </BiFormItem>
        <BiFormItem label="广告流量主">
          <template slot="content">
            <el-select
              v-model="formData.ad_switch"
              placeholder="请选择"
            >
              <el-option
                v-for="item in selectGZswitch"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem
          v-if="routerItem.app_type == '2'"
          label="关注加群"
        >
          <template slot="content">
            <el-select
              v-model="formData.dy_flow_switch"
              placeholder="请选择"
            >
              <el-option
                v-for="item in selectGGswitch"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              :disabled="loading"
              :loading="loading"
              @click="startSearch"
            >查询</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>

    <Block
      v-permission:channel-index
      class="content-table columnFlex"
    >
      <div
        class="rowFlex rowEnd"
        style="float:right;margin-bottom:-30px;z-index:10;margin-left:150px;"
      >
        <BiCustomColumn
          v-if="BiCustomColumnShow"
          key="tableColums"
          type=""
          :column-name="BiCustomColumnName"
          :table-column="tableColums"
          :default-list="defaultColumnList"
          :default-column="defaultColumn"
          @handleTableColumn="setTableColumn"
        />
        <el-button
          :disabled="checkedList.length==0"
          @click="showAddCharge = true"
        >修改收费配置</el-button>
        <el-button
          :disabled="checkedList.length==0"
          @click="changeMoreTemplate"
        >修改充值模版</el-button>
        <el-button
          v-if="routerItem.app_type == 2 && (tableData.length > 0 ? (tableData[0].follow_switch==1 || tableData[0].group_switch==1) : true)"
          :disabled="checkedList.length==0"
          @click="onAllAddGroup"
        >关注加群</el-button>
      </div>
      <el-tabs
        v-model="activeTab"
        class="tabs"
        @tab-click="tabChange"
      >
        <el-tab-pane
          label="推广渠道"
          name="3"
        ></el-tab-pane>
        <el-tab-pane
          label="运营渠道"
          name="4"
        ></el-tab-pane>
      </el-tabs>
      <div class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @selection-change="handleSelectionChange"
          @pagination="handlePageChange"
        >
          <template v-slot:channel_name="{ row }">
            <p class="title rowFlex">{{ row.channel_name }}
              <el-popover
                placement="right"
                trigger="hover"
              >
                <div>
                  <el-image
                    style="width:230px;"
                    :src="row.qr_code"
                    class="qrImage"
                  ></el-image>
                </div>
                <svg-icon
                  slot="reference"
                  icon-class="qr-code"
                  style="color:#333;margin-left:10px;"
                />
              </el-popover>
            </p>
          </template>
          <template v-slot:promote_url="{ row }">
            <div class="rowFlex columnCenter">
              <el-tooltip
                class="item"
                effect="dark"
                :content="row.promote_url"
                placement="top"
              >
                <p
                  class="promote_url"
                  size="medium"
                  type="text"
                >{{ row.promote_url }}</p>
              </el-tooltip>
              <svg-icon
                v-if="row.promote_url && row.promote_url!==''"
                icon-class="copy"
                class="icon"
                @click="clickCopy(row.promote_url)"
              />
            </div>
          </template>
          <template v-slot:ad_switch="{row}">
            <div v-if="row.mini_app_ad_switch==1">
              <div>
                <el-switch
                  v-model="row.ad_switch"
                  active-value="1"
                  inactive-value="2"
                  @change="adSwitchChange(row)"
                >
                </el-switch>
              </div>
            </div>
            <span v-else>-</span>
          </template>
          <template v-slot:player_switch="{row}">
            <!-- switch_status 1 打开 2 关闭  -->
            <div v-if="row.switch_status==1">
              <div>
                <el-switch
                  v-model="row.player_switch"
                  active-value="1"
                  inactive-value="2"
                  @change="videoSwitchChange(row)"
                >
                </el-switch>
              </div>
            </div>
            <span v-else>-</span>
          </template>
          <template v-slot:group_buy_switch="{row}">
            <div>
              <el-switch
                v-if="row.player_switch==1 && row.switch_status==1"
                v-model="row.group_buy_switch"
                active-value="1"
                inactive-value="2"
                @change="group_buy_switch(row)"
              >
              </el-switch>
              <span v-else>
                -
              </span>
            </div>
          </template>
          <template v-slot:first_reward_ad="{row}">
            <div v-if="row.ad_switch==1 && row.mini_app_ad_switch==1">
              <div>
                <el-switch
                  v-model="row.first_reward_ad"
                  active-value="1"
                  inactive-value="2"
                  @change="firstAdSwitchChange(row)"
                >
                </el-switch>
              </div>
            </div>
            <span v-else>-</span>
          </template>

          <template v-slot:dy_flow_switch="{row}">
            <div v-if="row.follow_switch==1 || row.group_switch==1">
              <el-switch
                v-model="row.dy_flow_switch"
                active-value="1"
                inactive-value="2"
                @change="onfeedbackChange(row)"
              >
              </el-switch>
            </div>
            <span v-else>-</span>
          </template>
          <template v-slot:promote_link="{ row }">
            <div
              v-if="row.promote_link!==''"
              class="rowFlex columnCenter"
            >
              <el-tooltip
                class="item"
                effect="dark"
                :content="row.promote_link"
                placement="top"
              >
                <p
                  class="promote_url"
                  size="medium"
                  type="text"
                >{{ row.promote_link }}</p>
              </el-tooltip>

              <svg-icon
                v-if="row.promote_link && row.promote_link!==''"
                icon-class="copy"
                class="icon"
                @click="clickCopy(row.promote_link)"
              />
            </div>
            <p v-else>--</p>
          </template>
          <template v-slot:open_page="{ row }">
            <div
              v-if="row.promote_url"
              style="display:flex;align-items:center"
            >
              <el-tooltip
                class="item"
                effect="dark"
                :content="row.promote_url.split('?')[0]"
                placement="top"
              >
                <span
                  class="promote_url"
                  size="medium"
                  type="text"
                >{{ row.promote_url.split('?')[0] }}</span>
              </el-tooltip>

              <svg-icon
                v-if="row.promote_url && row.promote_url!==''"
                icon-class="copy"
                class="icon"
                @click="clickCopy(row.promote_url.split('?')[0])"
              />
            </div>
            <div v-else>
              --
            </div>
          </template>
          <template v-slot:open_data="{ row }">
            <div
              v-if="row.promote_url"
              style="display:flex;align-items:center"
            >
              <el-tooltip
                class="item"
                effect="dark"
                :content="row.promote_url.split('?')[1]"
                placement="top"
              >
                <span
                  class="promote_url"
                  size="medium"
                  type="text"
                >{{ row.promote_url.split('?')[1] }}</span>
              </el-tooltip>
              <svg-icon
                v-if="row.promote_url && row.promote_url!==''"
                icon-class="copy"
                class="icon"
                @click="clickCopy( row.promote_url.split('?')[1])"
              />
            </div>
            <div v-else>
              --
            </div>
          </template>
          <template v-slot:zip="{ row }">
            <div class="rowFlex">
              <el-button
                v-permission:channel-payConfig
                type="text"
                size="medium"
                @click="charge(row)"
              > 收费配置</el-button>
              <el-button
                v-permission:channel-rechargeConfig
                type="text"
                size="medium"
                @click="changeCharge(row)"
              >修改充值模版</el-button>
            </div>
            <div class="rowFlex">
              <el-button
                v-permission:channel-rechargeConfig
                type="text"
                size="medium"
                @click="goOrderPath(row)"
              >订单明细</el-button>
              <!-- 小程序管理-引流设置中，开启引流且为公众号引流，显示该项， -->
              <!-- 微信小程序下显示引流设置 -->
              <el-button
                v-if="routerItem.app_type == 1 && row.flow_config==1"
                type="text"
                size="medium"
                @click="drainage(row)"
              >引流设置</el-button>
              <el-popconfirm
                icon="el-icon-info"
                icon-color="red"
                style="margin-left:10px;"
                title="确定删除吗？"
                @confirm="delRow(row)"
              >
                <el-button
                  slot="reference"
                  v-permission:channel-del
                  type="text"
                  size="medium"
                >删除</el-button>
              </el-popconfirm>
            </div>
          </template>
          <template v-slot:pay_coin="{ row }">
            <div style="display:flex;align-items:center">
              <span>{{ row.pay_coin }}</span>
              <span
                v-if="row.step&&row.step.length>0"
                style="margin-left: 8px;"
                class="tag"
                @click="onShowStep(row)"
              >阶梯价</span>
            </div>
          </template>
        </BiTable>
      </div>
    </Block>
    <!-- 收费配置 -->
    <BiDrawer
      v-model="chargeLayer"
      :row-info="rowInfo"
      drawer-title="付费设置"
      :component="drawerComponent.chargeDrawer"
      drawer-size="800px"
      @ok="onSubmit"
    ></BiDrawer>
    <el-dialog
      title="修改充值模板"
      :visible.sync="dialogTableVisible.visible"
      width="820px"
      @close="onDialogClose"
    >
      <div>
        <div class="form_item">
          <div class="item_label">
            付费模板
          </div>
          <div class="item_slot">
            <el-select
              v-model="newPayTemplateId"
              filterable
              clearable
              placeholder="请选择"
              @change="onTemplatePreview"
            >
              <el-option
                v-for="item in optionsList.payTemplateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="pay_template">
          <div class="pay_template_header">
            <div class="text">首充模板</div>
            <div class="text">复充模板</div>
          </div>
          <div class="pay_template_main">
            <div class="content">
              <newRechargeTemplate :list="templatePreviewData.first_ist"></newRechargeTemplate>
            </div>
            <div class="content">
              <newRechargeTemplate :list="templatePreviewData.repeat_list"></newRechargeTemplate>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="dialogTableVisible.visible = false">取 消</el-button>
        <el-button
          type="primary"
          :loading="btnLoading"
          @click="setRechargeTemplate"
        >确 定</el-button>
      </div>
    </el-dialog>
    <StepDialogVue
      v-if="StepDialog.show"
      :step="StepDialog.step"
      @close="onCloseStep"
    ></StepDialogVue>
    <!-- 引流设置 -->
    <BiDrawer
      v-model="showDrainage"
      :row-info="rowInfo"
      drawer-title="引流设置"
      :component="drawerComponent.drainage"
      drawer-size="500px"
      @ok="drainageSubmit"
    ></BiDrawer>
    <addCharge
      v-if="showAddCharge"
      :show.sync="showAddCharge"
      type="batch"
      :channel-id="checkedList"
      :playlet-ids="playletids"
      :row-info="{}"
      :edit-info="{}"
      @result="setMoreCharge"
    />
    <changeTemplateMsg
      v-if="shwoTemplateMsg"
      :show.sync="shwoTemplateMsg"
      :template-type="formData.templateType"
      :row-info="rowInfo"
      :msg="templateMsg"
    />
    <!-- allAddGroup_show -->
    <allAddGroup
      v-if="allAddGroup_show"
      :channel-id="checkedList"
      @close="allAddGroupClose"
      @ok="allAddGroupOk"
    ></allAddGroup>
  </div>
</template>

<script>
import { onTableColums } from './tableColums'
import StepDialogVue from '@/components/StepDialog'
import BiDrawer from '@/components/BiDrawer'
import chargeDrawer from './component/charge.vue'
import drainage from './component/drainage.vue'
import newRechargeTemplate from '@/common/component/newRechargeTemplate.vue'
import { channelIndex, channelDel, MiniAppIdcommonData, templatePreview, channelTemplateSave, channelData, flowSwitch, adSwitch, batchChannelfirstRewardAd, batchChannelTemplateSave, playerSwitch, groupBuySwitch } from '@/api/channel'
import { commonData } from '@/api/common'
import { formatNumber } from '@/utils/index'
import { mapState, mapGetters } from 'vuex'
import addCharge from './component/addCharge.vue'
import changeTemplateMsg from './component/changeTemplateMsg.vue'
import allAddGroup from './component/allAddGroup.vue'
export default {
  name: 'AutoReplay',
  components: {
    BiDrawer,
    newRechargeTemplate,
    StepDialogVue,
    changeTemplateMsg,
    addCharge,
    allAddGroup
  },
  data() {
    return {
      allAddGroup_show: false,
      BiCustomColumnName: 'channel-rfm-1',
      BiCustomColumnShow: true,
      templateType: 'single', // single multiple
      formData: {
        id: [],
        advertiser_id: [],
        playlet_id: '',
        creator: '',
        distributor_id: [],
        ad_switch: '',
        dy_flow_switch: '',
        mini_app_id: ''
      },
      playletids: [],
      defaultColumnList: [],
      shwoTemplateMsg: false,
      showAddCharge: false,
      templateMsg: '',
      checkedList: [],
      checkedListData: [],
      isResize: false,
      btnLoading: false,
      activeTab: '3',
      eqActiveTab: '3',
      advertiserList: [],
      platletNameList: [],
      channelId: '',
      newPayTemplateId: '',
      optionsList: {
        payTemplateList: []
      },
      selectGZswitch: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '开启',
          value: 1
        },
        {
          label: '关闭',
          value: 2
        }
      ],
      selectGGswitch: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '开启',
          value: 1
        },
        {
          label: '关闭',
          value: 2
        }
      ],
      channelList: [],
      chargeLayer: false,
      addTheater: false,
      loading: false,
      showDrainage: false,
      rowInfo: {},
      showRow: false,
      channelDataList: [],
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      drawerComponent: {
        chargeDrawer: chargeDrawer,
        drainage: drainage
      },
      dialogTableVisible: {
        row: {},
        visible: false
      },
      tableData: [],
      tableColums: [],
      defaultColumn: {},
      templatePreviewData: {},
      StepDialog: {
        step: [],
        show: false
      }
    }
  },

  computed: {
    ...mapGetters(['menu', 'currentMenuId']),
    ...mapState('user', ['routerItem', 'mini_app_id', 'menu']),
    menuList() {
      const list = this.menu.filter((item) => item.id === this.currentMenuId)
      const currentlist = this.currentMenuId && list[0] ? list[0].child : []
      return currentlist
    }
  },
  created() {
    localStorage.removeItem('channel-rfm')
    if (this.routerItem.app_type == 2) {
      this.BiCustomColumnName = 'channel-rfm-3'
      const tableInfo = onTableColums(3)
      this.tableColums = tableInfo.tableColums
      this.defaultColumn = tableInfo.defaultColumn
      this.defaultColumnList = tableInfo.defaultColumnList
    } else {
      this.BiCustomColumnName = 'channel-rfm-1'
      const tableInfo = onTableColums(1)
      this.tableColums = tableInfo.tableColums
      this.defaultColumn = tableInfo.defaultColumn
      this.defaultColumnList = tableInfo.defaultColumnList
    }
  },
  mounted() {
    this.remoteMethod('')
    this.platletList('')
    this.clickSearch()
    this.$AccessReport.report('zhangyu-channel', [this.$store.state.user.routerItem.name, '渠道管理', '推广渠道'])
  },
  methods: {
    allAddGroupOk() {
      this.allAddGroup_show = false
      this.clickSearch()
    },
    allAddGroupClose() {
      this.allAddGroup_show = false
    },
    onAllAddGroup() {
      this.allAddGroup_show = true
    },
    setTableColumn(column) {
      console.log(column)
      this.$set(this, 'tableColums', [])
      column.push({
        label: '操作',
        prop: 'zip',
        width: 210,
        fixed: 'right',
        slotScope: true
      })
      setTimeout(() => {
        this.$set(this, 'tableColums', column)
        this.clickSearch()
      }, 10)
    },
    handleSelectionChange(val) {
      if (val && val.length > 0) {
        const list = val.map((item) => {
          return item.id
        })
        this.checkedList = list
        const playletList = val.map((item) => {
          return item.playlet_id
        })
        this.playletids = playletList
        console.log(this.playletIds, '>>>>>>>>>>>>>>>>>>>>')
        this.checkedListData = val
      } else {
        this.checkedList = []
        this.playletIds = []
        this.checkedListData = true
      }
    },
    async onfeedbackChange(row) {
      const data = {
        channel_id: row.id,
        dy_flow_switch: row.dy_flow_switch
      }
      const res = await flowSwitch(data)
      if (res.status_code == 1) {
        this.$message.success(res.msg)
      }
    },
    async videoSwitchChange(row) {
      const res = await playerSwitch({ channel_id: row.id, player_switch: row.player_switch })
      if (res.status_code == 1) {
        this.$message.success(res.msg)
      }
    },
    async group_buy_switch(row) {
      const res = await groupBuySwitch({ channel_id: row.id, group_buy_switch: row.group_buy_switch })
      if (res.status_code == 1) {
        this.$message.success(res.msg)
      }
    },
    async firstAdSwitchChange(row) {
      const res = await batchChannelfirstRewardAd({ channel_id: row.id, first_reward_ad: row.first_reward_ad })
      if (res.status_code == 1) {
        this.$message.success(res.msg)
      }
    },
    async adSwitchChange(row) {
      const data = {
        channel_id: row.id,
        ad_switch: row.ad_switch
      }
      const res = await adSwitch(data)
      if (res.status_code == 1) {
        this.$message.success(res.msg)
      }
    },
    onShowStep(row) {
      this.StepDialog = {
        step: row.step,
        show: true
      }
    },
    setMoreCharge() {},
    onCloseStep() {
      this.StepDialog = {
        step: [],
        show: false
      }
    },
    clickSearch() {
      this.loading = true
      const params = { ...this.formData, ...this.page_info, channel_type: this.activeTab }
      params.advertiser_id = this.formData.advertiser_id.join(',')
      channelIndex(params).then((res) => {
        this.loading = false
        if (res.status_code === 1) {
          this.page_info = res.data.page_info
          res.data.data.length > 0 ? this.channelData(res.data.data) : (this.tableData = res.data.data)
        }
      })
    },
    // 分销方
    distributorResult(value) {
      this.formData.distributor_id = value
    },
    channelData(data) {
      const param = {
        channel_id: data.map((item) => item.id)
      }
      channelData(param).then((res) => {
        if (res.status_code === 1) {
          if (res.data.data.length > 0) {
            this.channelDataList = res.data.data
            this.tableData = data.map((item, index) => {
              item = { ...item, ...this.channelDataList[index] }
              return item
            })
          } else {
            this.tableData = data
          }
        }
      })
    },
    // 执行这个重新获取焦点的方法 就可以了
    mobileClearChannel(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { channel } = this.$refs
            const input = channel.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    mobileClearkeyword(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { keyword } = this.$refs
            const input = keyword.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    mobileClearPlatlet(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { platlet } = this.$refs
            const input = platlet.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    tabChange(value, event) {
      if (this.activeTab == 3) {
        this.$AccessReport.report('zhangyu-channel', [this.$store.state.user.routerItem.name, '渠道管理', '推广渠道'])
      } else {
        this.$AccessReport.report('zhangyu-channel', [this.$store.state.user.routerItem.name, '渠道管理', '运营渠道'])
      }

      if (this.eqActiveTab == value.name) {
        console.log('一样的')
        return false
      } else {
        this.eqActiveTab = value.name
      }
      this.page_info = {
        page: 1,
        page_size: 20,
        total: 0
      }
      localStorage.removeItem('channel-rfm')
      this.BiCustomColumnShow = false
      if (this.routerItem.app_type == 2 && value.name == 3) {
        this.BiCustomColumnName = 'channel-rfm-3'
        const tableInfo = onTableColums(3)
        this.tableColums = tableInfo.tableColums
        this.defaultColumn = tableInfo.defaultColumn
        this.defaultColumnList = tableInfo.defaultColumnList
        this.$nextTick()
        setTimeout(() => {
          this.BiCustomColumnShow = true
        }, 50)
      } else if (this.routerItem.app_type == 2 && value.name == 4) {
        this.BiCustomColumnName = 'channel-rfm-4'
        const tableInfo = onTableColums(4)
        this.tableColums = tableInfo.tableColums
        this.defaultColumn = tableInfo.defaultColumn
        this.defaultColumnList = tableInfo.defaultColumnList
        console.log(this.defaultColumn, this.defaultColumnList)
        this.$nextTick()
        setTimeout(() => {
          this.BiCustomColumnShow = true
        }, 50)
      } else if (this.routerItem.app_type == 1 && value.name == 3) {
        this.BiCustomColumnName = 'channel-rfm-1'
        const tableInfo = onTableColums(1)
        this.tableColums = tableInfo.tableColums
        this.defaultColumn = tableInfo.defaultColumn
        this.defaultColumnList = tableInfo.defaultColumnList
        this.$nextTick()
        setTimeout(() => {
          this.BiCustomColumnShow = true
        }, 50)
        console.log(this.defaultColumn, this.defaultColumnList)
      } else if (this.routerItem.app_type == 1 && value.name == 4) {
        this.BiCustomColumnName = 'channel-rfm-2'
        const tableInfo = onTableColums(2)
        this.tableColums = tableInfo.tableColums
        this.defaultColumn = tableInfo.defaultColumn
        this.defaultColumnList = tableInfo.defaultColumnList
        this.$nextTick()
        setTimeout(() => {
          this.BiCustomColumnShow = true
        }, 50)
        console.log(this.defaultColumn, this.defaultColumnList)
      }
      this.clickSearch()
    },
    onadvertiser(value) {
      const activeList = []
      const allIndex = this.formData.advertiser_id.indexOf('000')
      if (value.indexOf('000') != -1) {
        this.advertiserList.map((item) => {
          item.advertiser_id != '000' ? activeList.push(item.advertiser_id) : null
        })
        console.log(this.formData.advertiser_id, '----------------')
        this.formData.advertiser_id.splice(allIndex, 0)
        this.formData.advertiser_id = activeList
      }
    },
    channelResult(value) {
      console.log(value)
      const activeList = []
      const allIndex = this.formData.id.indexOf('000')
      if (value.indexOf('000') != -1) {
        this.channelList.map((item) => {
          item.value != '000' ? activeList.push(item.value) : null
        })
        console.log(this.formData.id, '----------------')
        this.formData.id.splice(allIndex, 0)
        this.formData.id = activeList
      }
    },
    async platletList(query) {
      const res = await commonData({
        type: 'playlet',
        value: query,
        mini_app_id: window.localStorage.getItem('mini_app_id')
      })
      if (res.status_code == 1) {
        this.platletNameList = res.data.data.filter((item) => {
          return item.is_show == 1
        })
      }
    },
    async advertiserListData(query) {
      if (!query) {
        return
      }
      const res = await commonData({
        type: 'advertiserList',
        value: query,
        mini_app_id: window.localStorage.getItem('mini_app_id')
      })
      if (res.status_code === 1) {
        this.advertiserList = res.data.data
      }
    },
    remoteMethod(query) {
      if (query !== '') {
        commonData({ type: 'channel', value: query, mini_app_id: localStorage.getItem('mini_app_id') ? localStorage.getItem('mini_app_id') : '' }).then((res) => {
          this.channelList = res.data.data
          this.channelList.unshift({
            label: '全选',
            value: '000'
          })
        })
      }
    },
    clickCopy(url) {
      const input = document.createElement('input')
      // input.hidden = true
      input.setAttribute('value', url)
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      this.$message.success('复制成功')
    },
    startSearch() {
      this.page_info.page = 1
      this.clickSearch()
    },
    setRechargeTemplate() {
      this.btnLoading = true
      if (this.templateType == 'single') {
        // 单个操作
        this.onSetChannelRechargeTemplate()
      } else {
        // 批量操作
        this.multipleRechargeTemplage()
      }
    },
    // 批量修改充值模版
    async multipleRechargeTemplage() {
      if (this.newPayTemplateId === '') {
        this.$message.warning('请选择付费模版')
        this.btnLoading = false
        return false
      }
      console.log(this.checkedList)
      const data = {
        channel_id: this.checkedList,
        template_id: this.newPayTemplateId
      }
      try {
        const res = await batchChannelTemplateSave(data)
        this.btnLoading = false
        if (res.status_code == 1) {
          this.$message.success(res.msg)
          this.dialogTableVisible.visible = false
          this.clickSearch()
        }
      } catch (error) {
        this.templateMsg = error
        this.shwoTemplateMsg = true
        this.btnLoading = false
      }
    },
    // 单个修改充模版
    async onSetChannelRechargeTemplate() {
      if (this.newPayTemplateId === '') {
        this.$message.warning('请选择付费模版')
        this.btnLoading = false
        return false
      }
      try {
        const res = await channelTemplateSave({
          channel_id: this.channelId,
          template_id: this.newPayTemplateId
        })
        this.btnLoading = false
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          this.dialogTableVisible.visible = false
          this.clickSearch()
        }
      } catch (error) {
        this.templateMsg = error
        this.btnLoading = false
        this.shwoTemplateMsg = true
      }
    },
    // 模板预览
    async onTemplatePreview(value) {
      if (value) {
        const res = await templatePreview({
          template_id: value
        })
        if (res.status_code == 1) {
          this.templatePreviewData = res.data.data
        }
      }
    },
    // 充值模板下拉
    async getRechargeTemplate() {
      const res = await MiniAppIdcommonData({
        type: 'rechargeTemplate'
      })
      if (res.status_code == 1) {
        this.optionsList.payTemplateList = res.data.data
      }
    },
    // 批量修改充值模版
    changeMoreTemplate() {
      this.templateType = 'multiple'
      this.dialogTableVisible.visible = true
      this.getRechargeTemplate()
    },
    // 修改充值模版
    changeCharge(row) {
      // this.$router.push({
      //   path: '/channel/template',
      //   query: {
      //     id: row.id,
      //     template_id: row.template_id
      //   }
      // })
      this.templateType = 'single'
      this.newPayTemplateId = row.template_id ? row.template_id * 1 : ''
      if (row.template_id) {
        this.onTemplatePreview(row.template_id)
      }
      this.channelId = row.id
      this.dialogTableVisible.visible = true
      this.getRechargeTemplate()
    },
    onDialogClose() {
      this.newPayTemplateId = ''
      this.optionsList.payTemplateList = []
      this.channelId = ''
      this.templatePreviewData = {}
    },
    reset() {
      this.$set(this, 'formData', {
        id: '',
        advertiser_id: [],
        playlet_id: '',
        creator: '',
        ad_switch: '',
        dy_flow_switch: '',
        distributor_id: [],
        mini_app_id: ''
      })
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 200)
      this.$set(this, 'page_info', {
        page: 1,
        page_size: 20,
        total: 0
      })
    },
    add(title) {
      this.addTheater = true
    },
    drainage(row) {
      this.rowInfo = row
      this.showDrainage = true
    },
    charge(row) {
      this.rowInfo = row
      this.chargeLayer = true
    },
    showDetails(row) {
      console.log(row)
      this.rowInfo = row
      this.showRow = true
    },
    delRow(row) {
      channelDel({ id: row.id }).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          setTimeout(() => {
            this.clickSearch()
          }, 2000)
        }
      })
    },
    returnRouter(arr) {
      let router = {}
      arr.map((item) => {
        if (item.child) {
          item.child.map((items) => {
            if (items.router === '/order/index') {
              router = items
              return
            }
          })
        } else {
          if (item.router === '/order/index') {
            router = item
            return
          }
          return router
        }
      })
      return router
    },
    goOrderPath(row) {
      try {
        const itemRouter = this.returnRouter(this.menuList)
        this.$store.dispatch('user/selectMenuRouter', itemRouter)
      } catch (error) {
        console.log('跳转失败')
      }
      this.$router.push({
        path: '/order/index',
        query: {
          channel_id: row.id,
          channel_name: row.channel_name
        }
      })
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    onSubmit(data) {
      auto_reply_save(data).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
        }
      })
    },
    drainageSubmit() {
      this.clickSearch()
    }
  }
}
</script>
  <style lang="scss" scoped>
::v-deep .search-form .el-select__tags {
  max-width: 220px !important;
}
.pay_template {
  width: 100%;
  border: 1px solid #ebeef5;
  margin-top: 20px;
  .pay_template_header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    background: #f7f8fa;
    justify-content: space-between;
    .text {
      width: 50%;
      display: flex;
      justify-content: center;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
  }
  .qrImage {
    width: 200px;
    height: 200px;
  }
  .pay_template_main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .content {
      width: 50%;
      border: 1px solid #ebeef5;
      padding: 15px !important;
    }
  }
}
.form_item {
  display: flex;
  align-items: center;
  .item_label {
    width: 90px;
  }
}
.game-name {
  display: flex;
  align-items: center;
  .userImage {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
}
.icon {
  font-size: 16px;
  color: #06c261;
  margin-left: 5px;
  cursor: pointer;
  flex-shrink: 0;
}
.promote_url {
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tag {
  display: flex;
  width: 58px;
  height: 24px;
  background: #eeeff1;
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hover-row .tag {
  background: #bcf8da;
  color: #00994a;
}
.content-outer {
  ::v-deep .el-drawer__body {
    > div {
      height: auto !important;
    }
  }
}
</style>
